<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <ul id="list">

    </ul>
    <script>
        var arr = [{
                name: "小明",
                age: 12,
                sex: "f"
            },
            {
                name: "小红",
                age: 11,
                sex: "m"
            },
            {
                name: "小强",
                age: 13,
                sex: "f"
            },
        ];

        let list = document.querySelector("#list");

        for (let index = 0; index < arr.length; index++) {
            let li = document.createElement("li");
            // 创建 li => 的div
            let infoDiv = document.createElement("div");
            infoDiv.className = "info";
            // 创建的li是孤儿节点 必须上树
            list.appendChild(li);
            // 创建的div是孤儿节点 必须上树
            li.appendChild(infoDiv);

            let p1 = document.createElement("p");
            p1.innerText = "姓名：" + arr[index].name;

            let p2 = document.createElement("p");
            p2.innerText = "年龄：" + arr[index].age;

            let p3 = document.createElement("p");
            p3.innerText = "性别：" + arr[index].sex;

            infoDiv.appendChild(p1);
            infoDiv.appendChild(p2);
            infoDiv.appendChild(p3);
        }
    </script>
</body>

</html>